<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax 示例</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/page.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../js/msgbox/msgbox.css" />
<style>
h1 {
	color:#6CC;
}
h2 {
	color: #F00;
}
p {
	margin:5px;
	padding:5px;
	background-color:#313131;
	color:#FFF;
}
pre {
	margin:5px;
	padding:5px;
	background-color:#313131;
	color:#FFF;
}
.result {
	margin:5px;
	padding:5px;
	background-color:#313131;
	color:#FFF;
}
.result  span {
	color:#6CF;
}
</style>
<script src="../js/jquery-1.6.js" type="text/javascript">
    </script>
<script src="../js/jquery.myPagination5.0.js" type="text/javascript">
    </script>
<script language="javascript" type="text/javascript" src="../js/msgbox/msgbox.js">
    </script>
</head>
<body>
<script>
      var jsonMyPagination;
      var xmlMyPagination;
      var htmlMyPagination;

      $(function() {

        jsonMyPagination = $("#demo1").myPagination({
          ajax: {
            on: true,
            url: "jsonData.txt",
            dataType: 'json',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
              $("#demo1_result").html("<span>ajax请求结果：</span>" + objToString(data));
            }
          }
        });

        xmlMyPagination = $("#demo2").myPagination({
          cssStyle: "green-black",
          ajax: {
            on: true,
            url: "xmlData.xml",
            dataType: 'xml',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
			  
			  var result = "";
			  $(data).find("book").each(function(i) {
				var id = $(this).attr("id");
				var name = $(this).find("name").text();
				var author = $(this).find("author").text();
				var price = $(this).find("price").text();
				result += "book:("+id+","+name+","+author+","+price+")<br/>";
			  });
              $("#demo2_result").html("<span>ajax请求结果：</span><br/>" + result);
            }
          }
        });

        htmlMyPagination = $("#demo3").myPagination({
          cssStyle: "green-black",
          ajax: {
            on: true,
            url: "htmlData.txt",
            dataType: 'html',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
              $("#demo3_result").html("<span>ajax请求结果：</span>" + data);
            }
          }
        });
		
				$("#btn_getPage").click(function(){
					getPage();
				});
				
				$("#btn_onReload").click(function(){
					onReload();
				});
				
				$("#btn_jumpPage").click(function(){
					jumpPage();
				});
				
				$("#btn_onLoad").click(function(){
					onLoad();
				});

      });

      function objToString(obj) {
        var str = "";
        for (key in obj) {
          var value = eval("obj." + key);
          str += "key:" + key + "->value:" + value + "\r\n";
        }
        return str;
      }
	  
	function getPage(){
		var page = jsonMyPagination.getPage();
		alert("获得页数:"+page);
	}
	
	function onReload(){
		jsonMyPagination.onReload();
		alert("重新加载");
	};
	
	function jumpPage(){
		jsonMyPagination.jumpPage(10);
		alert("页面指定跳转");
	}
	
	function onLoad(){
		alert("开始指定加载");
		var formData = "t=1&p=2&c=3";
		jsonMyPagination.onLoad({formData:formData});
		alert("结束指定加载");
	}
	  
    </script>
<h1> 动态实例演示(需在Web环境下运行) </h1>
<h2> Demo1(Json) </h2>
<pre>
        jsonMyPagination = $("#demo1").myPagination({
          ajax: {
            on: true,
            url: "jsonData.txt",
            dataType: 'json',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
              $("#demo1_result").html("<span>ajax请求结果：</span>" + objToString(data));
            }
          }
        });
    </pre>
<div id="demo1"></div>
<div id="demo1_result" class="result"></div>
<h2> Demo2(Xml) </h2>
<pre>
        xmlMyPagination = $("#demo2").myPagination({
          cssStyle: "green-black",
          ajax: {
            on: true,
            url: "xmlData.xml",
            dataType: 'xml',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
			  
			  var result = "";
			  $(data).find("book").each(function(i) {
				var id = $(this).attr("id");
				var name = $(this).find("name").text();
				var author = $(this).find("author").text();
				var price = $(this).find("price").text();
				result += "book:("+id+","+name+","+author+","+price+")";
			  });
              $("#demo2_result").html("<span>ajax请求结果：</span>" + result);
            }
          }
        });
    </pre>
<div id="demo2"></div>
<div id="demo2_result" class="result"></div>
<h2> Demo3(Html) </h2>
<pre>
        htmlMyPagination = $("#demo3").myPagination({
          cssStyle: "green-black",
          ajax: {
            on: true,
            url: "htmlData.txt",
            dataType: 'html',
            ajaxStart: function() {
              ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 10000);
            },
            callback: function(data) {
              //用于测试，看到提示效果。
              setTimeout(function() {
                ZENG.msgbox.hide(); //隐藏加载提示
              }, 500);
              $("#demo3_result").html("<span>ajax请求结果：</span>" + data);
            }
          }
        });
    </pre>
<div id="demo3"></div>
<div id="demo3_result" class="result"></div>
<br />
<br />
<br />
<h1>增加了4个方法</h1>
<pre>    jsonMyPagination.getPage();  得到页数
    jsonMyPagination.onReload();  重新加载
    jsonMyPagination.jumpPage(page);  页面指定跳转
    jsonMyPagination.onLoad();  指定加载
</pre>
<div>
<input type="button" id="btn_getPage" value="得到页数" />
<input type="button" id="btn_onReload" value="重新加载" />
<input type="button" id="btn_jumpPage" value="页面指定跳转" />
<input type="button" id="btn_onLoad" value="指定加载" />
</div>
</body>
</html>